<template>
  <div class="m-steps-area">
    <div class="m-steps">
      <div
        :class="[
          'm-steps-item',
          {
            finished: stepsData[n - 1].status == '2',
            process: stepsData[n - 1].status == '1' && n !== totalSteps,
            'last-process': current === totalSteps && n === totalSteps,
            'middle-wait': stepsData[n - 1].status == '0' && n !== totalSteps,
            'last-wait': stepsData[n - 1].status == '0' && n === totalSteps,
          },
        ]"
        v-for="n in totalSteps"
        :key="n"
      >
        <div class="m-steps-icon" @click="onClick(n)">
          <span class="u-icon" v-if="stepsData[n - 1].status != '2'">{{
            n
          }}</span>
          <span class="u-icon" v-else>✓</span>
        </div>
        <div class="m-steps-content">
          <div class="u-steps-title" @click="onClick(n)">
            {{ stepsData[n - 1].label }}
          </div>

          <div class="u-steps-description" v-if="stepsData[n - 1].desc">
            {{ stepsData[n - 1].desc }}
          </div>

          <div
            class="u-steps-description"
            @click="
              querySubList(stepsData[n - 1].orderNo, stepsData[n - 1].label)
            "
            v-if="stepsData[n - 1].total"
          >
            <span style="border-bottom: 1px solid #000">
              <span style="color: red">{{ stepsData[n - 1].ngNumStr }}/</span>
              {{ stepsData[n - 1].hasDone }}/{{ stepsData[n - 1].total }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Steps2",
  props: {
    stepsData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    totalSteps: {
      // 总的步骤数
      type: Number,
      default: 3,
    },
    status: {
      // 总的步骤数
      type: String,
      default: "0",
    },
    currentStep: {
      // 当前选中的步骤
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      dialogVisible: true,
      // 若当前选中步骤超过总步骤数，则默认选择步骤1
      current: this.currentStep > this.totalSteps ? 1 : this.currentStep,
    };
  },
  methods: {
    onClick(index) {
      // 点击切换选择步骤
      this.$emit("clickSteps", index);
    },

    querySubList(orderNo, production) {
      this.$emit("querySubList", orderNo, production);
      // 点击切换选择步骤
    },
  },
};
</script>
<style lang="less" scoped>
.m-steps-area {
  margin: 0px auto;
  .m-steps {
    padding: 30px 0;
    display: flex;
    .m-steps-item {
      display: flex;
      flex-direction: column;
      flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
      overflow: hidden;
      font-size: 16px;
      line-height: 32px;
      .m-steps-icon {
        display: inline-block;
        margin-right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
      }
      .m-steps-content {
        display: inline-block;
        vertical-align: top;
        .u-steps-title {
          position: relative;
          display: inline-block;
          padding-right: 16px;
        }
        .u-steps-description {
          font-size: 20x;
        }
      }
    }
    .finished {
      cursor: pointer;
      &:hover {
        .m-steps-content {
          .u-steps-title {
            color: #67c23a;
          }
          .u-steps-description {
            color: #67c23a;
          }
        }
      }
      .m-steps-icon {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-color: #67c23a;
        position: relative;
        &:after {
          background: #67c23a;
          position: absolute;
          top: 16px;
          left: 100%;
          display: block;
          width: 9999px;
          height: 1px;
          content: "";
        }
        .u-icon {
          color: #67c23a;
        }
      }
      .m-steps-content {
        color: rgba(0, 0, 0, 0.65);
        .u-steps-title {
          color: rgba(0, 0, 0, 0.65);
        }
        .u-steps-description {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .process {
      cursor: pointer;
      .m-steps-icon {
        background: #1890ff;
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-color: #1890ff;
        position: relative;
        &:after {
          background: #e8e8e8;
          position: absolute;
          top: 16px;
          left: 100%;
          display: block;
          width: 9999px;
          height: 1px;
          content: "";
        }
        .u-icon {
          color: #fff;
        }
      }
      .m-steps-content {
        color: rgba(0, 0, 0, 0.65);
        .u-steps-title {
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }
        .u-steps-description {
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
    .last-process {
      margin-right: 0;
      .m-steps-icon {
        background: #67c23a;
        border: 1px solid rgba(0, 0, 0, 0.25);
        border-color: #67c23a;
        .u-icon {
          color: #fff;
        }
      }
      .m-steps-content {
        color: rgba(0, 0, 0, 0.65);
        .u-steps-title {
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
        }
        .u-steps-description {
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
    .middle-wait {
      cursor: pointer;
      &:hover {
        .m-steps-icon {
          border: 1px solid #67c23a;
          .u-icon {
            color: #67c23a;
          }
        }
        .m-steps-content {
          .u-steps-title {
            color: #67c23a;
          }
          .u-steps-description {
            color: #67c23a;
          }
        }
      }
      .m-steps-icon {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.25);
        position: relative;
        &:after {
          background: #e8e8e8;
          position: absolute;
          top: 16px;
          left: 100%;
          display: block;
          width: 9999px;
          height: 1px;
          content: "";
        }
        .u-icon {
          color: rgba(0, 0, 0, 0.25);
        }
      }
      .m-steps-content {
        color: rgba(0, 0, 0, 0.65);
        .u-steps-title {
          color: rgba(0, 0, 0, 0.45);
        }
        .u-steps-description {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .last-wait {
      margin-right: 0;
      cursor: pointer;
      &:hover {
        .m-steps-icon {
          border: 1px solid #67c23a;
          .u-icon {
            color: #67c23a;
          }
        }
        .m-steps-content {
          .u-steps-title {
            color: #67c23a;
          }
          .u-steps-description {
            color: #67c23a;
          }
        }
      }
      .m-steps-icon {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.25);
        .u-icon {
          color: rgba(0, 0, 0, 0.25);
        }
      }
      .m-steps-content {
        color: rgba(0, 0, 0, 0.65);
        .u-steps-title {
          color: rgba(0, 0, 0, 0.45);
        }
        .u-steps-description {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}
</style>
